<!DOCTYPE html>
<html>
<head>
<title>RandomDivs</title>
<style>
.colored{
padding: 5px;
margin: 5px;
display: inline-block;
}
#wrapper{
margin-top: 50px;
}
</style>
</head>
<body>
<input id="quantity" type="text" placeholder="Input number"/>
<input type="button" value="Generate!" onclick="onGenerateDivClick()"/>
<div id="wrapper">

<script>
function onGenerateDivClick(){
	var quantity = document.getElementById("quantity");
	var contentDiv = document.getElementById("wrapper");


	var positionArray = ["absolute", "relative", "fixed", "static", "inherit"];
	var borderWidth = ["thin", "medium", "thick", "solid", "length", "inherit", "dashed", "dotted"];

	for (var i = 0; i < quantity.value; i++) {

		var div = document.createElement("div");
		div.className = "colored";

		div.style.width = generateRandomNumber(20, 100) + "px";
		div.style.height = generateRandomNumber(20, 100) + "px";

		div.style.border = generateRandomNumber(1, 20) + "px " + borderWidth[generateRandomNumber(0, 7)] +
		" rgb(" + generateRandomNumber(1, 255) +
		"," + generateRandomNumber(1, 255) +
		"," + generateRandomNumber(1, 255) + ")";

		div.style.borderRadius = generateRandomNumber(1, 25) + "px";
		div.style.backgroundColor =
		"rgb(" + generateRandomNumber(1, 255) +
		"," + generateRandomNumber(1, 255) +
		"," + generateRandomNumber(1, 255) + ")";

		div.style.position = positionArray[generateRandomNumber(0, 4)]

		div.style.color =
		"rgb(" + generateRandomNumber(1, 255) +
		"," + generateRandomNumber(1, 255) +
		"," + generateRandomNumber(1, 255) + ")";

		div.innerHTML += "<strong>div</strong>"
		contentDiv.appendChild(div);

	};
}

function generateRandomNumber(from, to){
return Math.floor(Math.random()* to + from) ;
}
</script>
</div>
</body>
</html>